<%@ include file="/WEB-INF/views/taglib.jsp"%>
<spring:url var="banner" value="/resources/images/comfort/Logo_ComfortDelgro.png" />
<div class="loginWrapper">
<h1><img src="${banner}" /></h1>
<h3 align="center">Work Order - Clock In / Out

<div id="digitalTime">Loading time ...</div>
</h3>

<form:form id="form" method="post" modelAttribute="workOrderTechnician" cssClass="loginForm" >

<label for="workOrderCode">Scan Work Order</label> <br /> 

<form:input id="workOrderCode" path="workOrder.workOrderCode" size="20" maxlength="50" cssStyle="width:70%" />
<input type="button" value="Submit" style="width:28%" class="button" onclick="$('#form').submit()"/>
 <br /><br />
<label for="nric">Technician NRIC</label> <br />
<form:input id="nric" path="technician.nric" size="20" maxlength="50" /> <br /><br />
<label for="technicianName">Technician Name</label><br />
<h2><span id="technicianName">${workOrderTechnician.technician.personName}</span></h2><br />
<label for="technicianName">Time In/Out</label><br />
<h2><span id="timeDisplay">${workOrderTechnician.timeDisplay}</span></h2><br />
		<spring:bind path="*">
			<c:choose>
			<c:when test="${status.error}">
 			<c:choose>
 				<c:when test="${not empty status.errors.globalErrors}">
 				<div id="message" class="error">
		  		<span class="ui-icon ui-icon-circle-close left marginright5"></span>
		  		<ul>
		  		<c:forEach items="${status.errors.globalErrors}" var="error">
		  		<li><spring:message code="${error.code}" arguments="${error.arguments}" /></li>
		  		<c:set var="errorMsg" value="${error.code}"></c:set>
		  		</c:forEach>
		  		</ul>
			  	</div>	
			  	<script>
				var errorMsg = '${errorMsg}'; 
				</script>
 				</c:when>
 			</c:choose>
 			</c:when>
 			<c:when test="${not empty message}">
	 
			<div id="message" class="success">
			
				<span class="ui-icon ui-icon-circle-check left marginright5"></span>
				${message.text}
			</div>	
			<script>
				var errorMsg = '${message.text}'; 
			</script>
  			</c:when>
 			<c:otherwise>
 				<div class="error">Please sign Your ID to Accept Work Order</div>
 				<script>
				var errorMsg = ''; 
				</script>		
 			</c:otherwise>
			</c:choose>
 			
 		</spring:bind>
 		
	
	

</form:form> 


</div>


<script type="text/javascript">
	function autoFocusTechnician() {
		
		$('#workOrderCode').val($.trim($('#workOrderCode').val()));
		
		if($('#workOrderCode').val().length==15)
		{
			$('#nric').focus();
		}
		
		
	}
	$(document).ready(function() {
		
		<c:if test="${not empty message}">	
			$('#message').fadeOut(5000,function(){
				$('#workOrderCode').val('');
				$('#nric').val('');
				$('#technicianName').text('');
				$('#timeDisplay').text('');
				$('#message').text('Please sign Your ID to Accept Work Order');
				$('#message').removeClass();
				$('#message').addClass('error');
				$('#message').show(2000);
			});
		</c:if>
		
		setInterval(updateCurrentTime,2000);
		
		$('#workOrderCode').focus();
		
		if(errorMsg=='error.clockInOut.noTechnician')
			$('#nric').focus();		
		
		
		$('#workOrderCode').keyup(function(e) {
			
			autoFocusTechnician();
			
	    });
		
		$('#nric').keypress(function(e) {
			if($('#nric').val().length!=0) { 
		        if(e.which == 13) {
		            $('#form').submit();
		        }
			}
	    });
		
		
	});
	
	function updateCurrentTime()
	{
		$('#digitalTime').load('<c:url value="/ajax/currentTime"></c:url>');
	}
</script>		
